<template>
  <div class="side-main">
    <div class="logo" @click="refushwin">
      <img :src="currentLogo" alt="logo" />
      <span>网易云音乐</span>
    </div>
    <el-scrollbar class="navscrollbar">
      <ul class="nav">
        <li :key="'index'" :class="{ 'is-active': menuActive==='/index' }" @click="selectMenu('index')">
          <el-icon class="iconfont"> <i-bi-house-door-fill /></el-icon>
          <span>精选</span>
        </li>
        <li :key="'rank'" :class="{ 'is-active': menuActive === '/rank'}" @click="selectMenu('rank')">
          <el-icon class="iconfont"><i-bi-bar-chart-steps /></el-icon>
          <span>排行榜</span>
        </li>
        <li :key="'gedan'" :class="{ 'is-active': menuActive==='/gedan' }" @click="selectMenu('gedan')">
          <el-icon class="iconfont"><i-bi-music-note-list /></el-icon>
          <span>歌单</span>
        </li>
        <li :key="'singers'" :class="{ 'is-active': menuActive==='/singers' }" @click="selectMenu('singers')">
          <el-icon class="iconfont"><i-bi-headset /></el-icon>
          <span>歌手</span>
        </li>
        <el-divider />
        <li :key="'mylike'" :class="{ 'is-active': mylike_list.length>0 && menuActive ==='/gedan/'+mylike_list[0].id}" @click="openGd(mylike_list.length>0?mylike_list[0].id:0)">
          <el-icon class="iconfont" ><i-bi-heart-fill /></el-icon>
          <span>我喜欢的</span>
        </li>
        <li :key="'historyplay'" :class="{ 'is-active': menuActive==='/historyplay' }" @click="selectMenu('historyplay')">
          <el-icon class="iconfont"><i-bi-clock-fill /></el-icon>
          <span>最近播放</span>
        </li>
        <li :key="'download'" :class="{ 'is-active': menuActive==='/download' }" @click="selectMenu('download')">
          <el-icon class="iconfont"><i-bi-cloud-download-fill /></el-icon>
          <span>下载管理</span>
        </li>
        <li :key="'local'" :class="{ 'is-active': menuActive==='/local' }" @click="selectMenu('local')">
          <el-icon class="iconfont"><i-bi-folder-fill /></el-icon>
          <span>本地音乐</span>
        </li>
        <el-divider />
        <div class="mygd" @click="toggleCollapse">
          <span>创建的歌单</span>
          <div class="icons">
            <el-icon class="iconfont collapse-icon" :class="{ 'is-collapse': isCollapse }">
              <i-bi-chevron-down />
            </el-icon>
            <el-icon class="iconfont"><i-bi-plus-circle-fill /></el-icon>
          </div>
        </div>
        <div v-show="!isCollapse">
          <li v-for="gd in user_music_list" :key="gd.id" :class="{ 'is-active': menuActive ==='/gedan/'+gd.id}">
            <div class="gd-card" @click="openGd(gd.id)">
              <img :src="gd.coverImgUrl" fit="fill" />
              <span>{{ gd.name }}</span>
            </div>
          </li>
        </div>
      </ul>
    </el-scrollbar>
  </div>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "@/store/UserStore";
import { computed, reactive, onMounted, ref } from "vue";
import {playlistUser} from "@/assets/apis/http";
import { PlayList } from "@/assets/apis/MusicDataType";
import util from "@/tools/util";
import { ElMessage } from "element-plus/es";
import logoDark from '@/assets/img/logo-dark.png'
import logoLight from '@/assets/img/logo-light.png'
import logoChunYiLv from '@/assets/img/logo-chunyilv.png'

const usertore = useUserStore();
const route = useRoute();
const router = useRouter();

const userInfo = computed(() => {
  return usertore.userInfo;
});
const user_music_list = reactive<PlayList[]>([]);
const mylike_list = reactive<PlayList[]>([]);

async function getUserGd() {
  console.log("是否登录", usertore.isLogin);
  if (usertore.isLogin) {
    let userParam = { uid : userInfo.value.userId, limit : 30, offset : 0 }
    // 获取用户歌单
    const res = await playlistUser(userParam);
    const gdlist = res.playlist;
   //console.error("拉取用户歌单", gdlist);
    // 过滤歌单
    mylike_list.splice(0,mylike_list.length,...gdlist.filter(item => item.specialType === 5).map(
      item => ({
        coverImgUrl: util.formatSongsPic(item.coverImgUrl,100),
        name: item.name,
        id: item.id
      })
    ))
    user_music_list.splice(0,user_music_list.length,...gdlist.filter(item => !item.subscribed && item.specialType === 0)
      .map(item => ({
        coverImgUrl: util.formatSongsPic(item.coverImgUrl,100),
        name: item.name,
        id: item.id
      })))
    //console.error("用户歌单列表", user_music_list);
  } else {
    mylike_list.splice(0,user_music_list.length)
    user_music_list.splice(0,user_music_list.length)
  }
}

onMounted(() => {
  console.log("拉取用户歌单")
  getUserGd();
});

function openGd(id: number) {
  if (id === 0){
    ElMessage.warning("未登录")
    return
  }
  console.log("当前路由",menuActive.value)
  router.push({ path: `/gedan/${id}`});
}
function refushwin(){
  console.log("刷新页面",router.currentRoute.value.path)
  router.go(0)
}
// 当前选择菜单
const menuActive = computed(() => route.path);

const currentLogo = computed(() => {
  switch(usertore.currentTheme) {
    case 'chunyilv':
      return logoLight
    case 'dark':
      return logoChunYiLv
    case 'light':
      return logoDark
    default:
      return logoLight
  }
})

// 切换导航跳转
const selectMenu = (item) => {
  router.push({ path: "/" + item });
};

// 添加折叠状态控制
const isCollapse = ref(false)

// 切换折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}
</script>
<style lang="scss" scoped>
.side-main {
  display: flex;
  flex-direction: column;
  background-color: var(--transparent-11);
  height: 100vh;
  color: var(--el-text-color-primary);

  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 19px;
    cursor: pointer;
    background-color: var(--bg-bar-sidelogo);

    img {
      width: 30px;
      padding-right: 5px;
    }

    span {
      font-size: 18px;
    }
  }

  .nav {
    margin-block-start: 0;
    margin: 0 15px;
    overflow-y: hidden;

    .el-divider--horizontal {
      margin: 10px 0;
    }

    li {
      display: block;
      padding: 2px 5px;
      margin-top: 5px;
      margin-bottom: 2px;
      border-radius: 8px;
      text-align: left;
      font-size: 15px;
      cursor: pointer;

      &:hover {
        background-color: var(--my-bg-menu-hover);
      }

      &.is-active {
        font-weight: 400;
        background-color: var(--my-bg-menu-active);
        box-shadow: 0 20px 27px var(--el-box-shadow-dark);
      }

      span {
        display: inline-block;
        line-height: 32px;
      }

      .gd-card {
        font-size: 15px;
        display: flex;
        align-items: center;
        padding: 3px;
        img {
          width: 38px;
          height: 38px;
          object-fit: cover;
          border-radius: 5px;
          margin-right: 10px;
        }

        span {
          line-height: 21px;
        }
      }
    }

    .mygd {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .icons {
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .collapse-icon {
        transition: transform 0.3s;
        &.is-collapse {
          transform: rotate(-90deg);
        }
      }

      i {
        cursor: pointer;
      }
    }

    .iconfont {
      display: inline-flex;
      width: 32px;
      height: 32px;
      justify-content: center;
      align-items: center;
      margin-right: 5px;
      font-size: 18px;
      vertical-align: top;
    }
  }
  .navscrollbar{
    height: calc(100vh - 70px);
  }
}
</style>
